import { List, DatePicker, Drawer } from 'antd-mobile'
import classnames from 'classnames'

import NavBar from '../../../components/NavBar'
import styles from './index.module.scss'

// import EditList from './components/EditList'
// import EditInput from './components/EditInput'

const Item = List.Item

const ProfileEdit = () => {
  return (
    <div className={styles.root}>
      <div className="content">
        <NavBar>个人信息</NavBar>
        <div className="wrapper">
          <List className="profile-list">
            <Item
              arrow="horizontal"
              extra={
                <span className="avatar-wrapper">
                  <img
                    src="http://toutiao.itheima.net/images/user_head.jpg"
                    alt=""
                  />
                </span>
              }
            >
              头像
            </Item>
            <Item arrow="horizontal" extra="黑马先锋">
              昵称
            </Item>
            <Item
              arrow="horizontal"
              extra={
                <span className={classnames('intro', 'normal')}>未填写</span>
              }
            >
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item arrow="horizontal" extra="男">
              性别
            </Item>
            <DatePicker
              mode="date"
              value={new Date()}
              title="选择年月日"
              minDate={new Date(1900, 1, 1, 0, 0, 0)}
              maxDate={new Date()}
            >
              <Item arrow="horizontal" extra="1999-10-1">
                生日
              </Item>
            </DatePicker>
          </List>

          <input type="file" hidden />
        </div>

        <div className="logout">
          <button className="btn">退出登录</button>
        </div>
      </div>

      {/* 头像、性别 */}
      <Drawer className="drawer-list" position="bottom">
        {''}
      </Drawer>
      {/* 昵称、简介 */}
      <Drawer className="drawer" position="right">
        {''}
      </Drawer>
    </div>
  )
}

export default ProfileEdit
